@import '@devui/theme/styles-var/devui-var.scss';

$devui-btn-sm-padding: var(--devui-btn-sm-padding, 0 16px);
$devui-btn-padding: var(--devui-btn-padding, 0 20px);
$devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);

$font-size-map: (
  lg: $devui-font-size-lg,
  md: $devui-font-size-md,
  sm: $devui-font-size-sm,
);
$radio-label-height-map: (
  lg: $devui-size-lg,
  md: $devui-size-md,
  sm: $devui-size-sm,
);
$button-padding-map: (
  lg: $devui-btn-lg-padding,
  md: $devui-btn-padding,
  sm: $devui-btn-sm-padding,
);
.#{$devui-prefix}-radio-button {
  display: flex;
  align-items: center;
  position: relative;
  padding: $devui-btn-padding;
  height: $devui-size-md;
  font-size: $devui-font-size-md;
  color: $devui-text;
  cursor: pointer;
  border: 1px solid $devui-line;
  user-select: none;
  @each $size in ('lg', 'md', 'sm') {
    &.#{$devui-prefix}-radio-button--#{$size} {
      font-size: map-get($font-size-map, #{$size});
      padding: map-get($button-padding-map, #{$size});
      height: map-get($radio-label-height-map, #{$size});
      line-height: map-get($radio-label-height-map, #{$size});
    }
  }

  &__input {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none;
  }

  &.active {
    color: #ffffff;
    background-color: $devui-brand;
    border-color: $devui-brand;

    &.disabled {
      color: #ffffff;
      background-color: $devui-icon-fill-active-disabled;
    }
  }

  &.disabled {
    cursor: not-allowed;
    color: $devui-disabled-text;
    background-color: #ffffff;
    border-color: $devui-disabled-line;
  }
}

.#{$devui-prefix}-radio-group {
  &.is-row {
    .#{$devui-prefix}-radio-button {
      border-left: none;

      &:first-child {
        border-top-left-radius: $devui-border-radius;
        border-bottom-left-radius: $devui-border-radius;
        border-left: 1px solid $devui-disabled-line;
      }

      &:last-child {
        border-top-right-radius: $devui-border-radius;
        border-bottom-right-radius: $devui-border-radius;
      }
    }
  }

  &.is-column {
    .#{$devui-prefix}-radio-button {
      width: 100%;
      border-top: none;

      &:first-child {
        border-top-left-radius: $devui-border-radius;
        border-top-right-radius: $devui-border-radius;
        border-top: 1px solid $devui-disabled-line;
      }

      &:last-child {
        border-bottom-left-radius: $devui-border-radius;
        border-bottom-right-radius: $devui-border-radius;
      }
    }
  }
}
